import React, { memo } from 'react';
import classnames from 'classnames';
import getCssPrefix from '../../lib/getCssPrefix';
import Cell from '../Cell';
import pickEffectiveProps from './lib/pickEffectiveProps';
const { cssPrefix } = getCssPrefix();
function Row(props) {
    const { rowData, columns, height, rowKey, rowIndex, modifyRowsVisual, rowVisual = {}, align } = props;
    const onMouseOver = () => {
        modifyRowsVisual(rowData[rowKey], 'hover', true)
    }
    const onMouseOut = () => {
        modifyRowsVisual(rowData[rowKey], 'hover', false)
    }
    const rowClassnames = classnames(`${cssPrefix}-row default`, {
        'row-hover': rowVisual.hover
    })
    return (
        <div
            className={rowClassnames}
            style={{ height }}
            onMouseOver={onMouseOver}
            onMouseOut={onMouseOut}
        >
            {columns.map((col) => {
                const { rowCellProps } = col;
                let plusCellProps = pickEffectiveProps(
                    (rowCellProps && typeof rowCellProps === 'function' && rowCellProps(rowData, rowKey, col.key, rowIndex)) || {}
                );                
                let cellWidth=col.width;
                return (
                    <Cell
                        key={col.key}
                        {...plusCellProps}
                        align={align}
                        rowHeight={height}
                        styles={{ width: cellWidth, height: '100%' }}
                    >
                        {typeof col.render === 'function' ?
                            col.render(rowData[col.key], rowData) :
                            rowData[col.key]
                        }
                    </Cell>);
            })}            
        </div>
    )
}
export default memo(Row);